<template>
  <section class="apply">
    <el-col :span="24" class="action-bar">
      <el-select v-model="searchType" class="action-bar-input" placeholder="请选择">
        <el-option
          v-for="item in searchTypeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
			<el-button type="primary" size="medium" @click="search">筛选</el-button>
    </el-col>
    <!--列表-->

		<el-table :data="userVipApplyList" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55"/>
			<el-table-column type="index" width="60"/>
			<el-table-column prop="realname" label="姓名" width="120"/>
			<el-table-column prop="phone" label="电话" width="120"/>
			<el-table-column prop="wechat" label="微信" width="120"/>
			<el-table-column prop="company_name" label="企业名称" width="150"/>
			<el-table-column prop="position" label="职位" width="100"/>
			<el-table-column prop="addr" label="是否为法人" width="100">
				<template slot-scope="scope">
					<div>
						{{scope.row.is_legal=='1'?'是':'否'}}
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="updated_at" label="提交申请时间" width="180"/>
			<el-table-column prop="addr" label="状态" width="100">
				<template slot-scope="scope">
					<!-- <el-tag type="info">未激活</el-tag> -->
					<el-tag v-if="scope.row.status=='0'" type="warning">审核中</el-tag>
					<el-tag v-if="scope.row.status=='1'" type="success">已通过</el-tag>
					<el-tag v-if="scope.row.status=='2'" type="info">已拒绝</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="250">
				<template slot-scope="scope">
					<!-- <el-button type="primary" size="mini" :disabled="scope.row.status!=0" @click="showAddForm(scope.row.id,scope.row.user_id)">通过</el-button> -->
					<el-button type="primary" size="mini"  @click="showAddForm(scope.row.id,scope.row.user_id)" :disabled="scope.row.status!=0">通过</el-button>
					<el-button type="danger" class="danger-btn"  size="mini" :disabled="scope.row.status!=0" @click="getUserVipApplyRefuse(scope.row.id,scope.row.user_id)">拒绝</el-button>
					<el-button type="primary" size="mini"  @click="showDetail(scope.row.id,scope.row.user_id)">查看详情</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
				<el-pagination 
				background
				layout="prev, pager, next"
				:total="totalPage"
				:page-size="16"
				@current-change="pageChange"
				>
				</el-pagination>
			</div>
   		 </el-col>

				<!-- 弹出的查看详情窗口 -->
			<el-dialog
			:visible.sync="dialogVisible"
			width="50%"
			height="50%"
			center
			class="editor-dialog"
			@close="initData"
			>
     			<el-form  label-width="120px"  ref="detailForm" label-position="left">
					<el-form-item label="姓名" prop="sex">
						<div>{{memberDetail.realname}}</div>
					</el-form-item>
					<el-form-item label="电话" prop="nickname">
						<div>{{memberDetail.phone}}</div>
					</el-form-item>
					<el-form-item label="微信" prop="phone">
						<div>{{memberDetail.wechat}}</div>
					</el-form-item>
					<el-form-item label="企业名称" prop="nickname">
						<div>{{memberDetail.company_name}}</div>
					</el-form-item>
					<el-form-item label="职位" prop="nickname">
						<div>{{memberDetail.position}}</div>
					</el-form-item>
					<el-form-item label="籍贯" prop="nickname">
						<div>{{memberDetail.birthplace}}</div>
					</el-form-item>
					<el-form-item label="是否为法人" prop="nickname">
						<div v-if="memberDetail.is_legal==1">是</div>
						<div v-else>否</div>
					</el-form-item>
					<el-form-item label="法人信息" prop="nickname">
						<div>{{memberDetail.legal_info}}</div>
					</el-form-item>
					<el-form-item label="入会说明" prop="nickname">
						<div>{{memberDetail.explanation}}</div>
					</el-form-item>
			</el-form>
    </el-dialog>

	<!-- 通过弹窗 -->
	 <el-dialog title="升级会员" :visible.sync="addFormVisible" @close="closeDialog"   center>
			<el-form :model="addForm" label-width="80px"  ref="addForm" label-position="left" inline>
                <el-col :span=24>
					<el-col :span="12">
						<el-form-item label="会员级别" prop="level" width="100px">
							<el-select v-model="addForm.level" placeholder="请选择" @change="levelChange" >
								<el-option
									v-for="item in levelOptions"
									:key="item.code"
									:label="item.name"
									:value="item.id"
									>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="缴费方式" prop="payMode" label-width="80px">
							<el-select v-model="addForm.payMode" placeholder="请选择"  :allow-create="true">
								<el-option
									v-for="item in payModeOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-col>

				 <el-col :span=24>
                            <el-form-item label="是否已缴清费用" prop="status" label-width="150px" >
							<el-radio-group v-model="addForm.status" >
								<el-radio class="radio" :label="1">是</el-radio>
								<el-radio class="radio" :label="0">否</el-radio>
							</el-radio-group>
						</el-form-item>
					<!-- <el-col :span="12">
						<el-form-item label="已缴费用" prop="received" v-if="addForm.status==2">
							<el-input v-model="addForm.received" ></el-input>
						</el-form-item>
					</el-col> -->
				</el-col> 
			</el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="closeDialog">取消</el-button>
				<el-button type="primary" @click="getUserVipApplyAgree">通过</el-button>
			</div>
        </el-dialog>
  </section>
</template>

<script>
export default {
	data(){
		return {
			userVipApplyList:[],
			dialogVisible:false,//编辑状态的弹窗
			searchType:'',//筛选的状态
			searchTypeOptions:[
				{label:'全部',value:''},
				{label:'审核中',value:0},
				{label:'已通过',value:1},
				{label:'拒绝',value:2},
			],
			page:1,
			totalPage:0,
			memberDetail:'',
			addFormVisible:false,//通过弹窗
			addForm:{
				level:'',//会员等级
				payMode:'',//缴费方式
				status:''//是否完成缴费
			},
			levelOptions:'',
            //会员缴费方式
			payModeOptions:[
                {label:'免费',value:0},
				{label:'一次性',value:1},
				{label:'分期',value:2}
			],
			id:'',//数据id
			uid:''//用户id
		}
  },
  methods: {
   async getUserVipRule(){
            //获取会员等级&缴费规则接口
            const data=await this.$api.getUserVipRule();
            if(data.data.level=='success'){
                let list= data.data.data.vip_list;
                this.levelOptions=list;

            }
        },
	async getUserVipApplyList(){
		//获取会员申请列表
		const res=await this.$api.getUserVipApplyList({
			page:this.page,
			pagesize:16,
			nickname:'',
			realname:'',
			status:this.searchType,//审核状态（审核状态：0：待审核 1：通过 2：拒绝）
			startTime:'',
			endTime:''
		})
		if(res.data.level=='success'){
			this.userVipApplyList=res.data.data.user_vip_apply_list;
			this.totalPage=res.data.data.total
		}
	},
	levelChange(e){
               //选中会员等级，更改相应缴费方式
            this.addForm.payMode='';//重置缴费方式
            const rule=this.levelOptions.find(val=>{
                return val.id==e
            })
            //一次性不能转为分期
            
			const list=rule.pay_rule_list;
			this.payModeOptions=list.map((item)=>{
				return {label:item.type_name,value:item.id}
			})

          },
	showAddForm(id,uid){
		//显示通过细则
		this.id=id;
		this.uid=uid;
		this.addFormVisible=true;
	},
	async getUserVipApplyAgree(){
		const res=await this.$api.getUserVipApplyAgree({
			id:this.id,
			uid:this.uid,
			vip_rule_id:this.addForm.level,
			pay_rule_id:this.addForm.payMode,
			payment_status:this.addForm.status
			})
		if(res.data.level=='success'){
			this.getUserVipApplyList();
			this.addFormVisible=false;
			this.$message({
				type: 'success',
				message: res.data.message
			});
		}else{
			this.$message({
				type: 'error',
				message: res.data.message
			});
		}
	},
	async getUserVipApplyRefuse(id,uid){
		//拒绝会员申请
		const judge= this.$confirm('拒绝该用户入会申请?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const res=await this.$api.getUserVipApplyRefuse({
							id,uid
						})
					if(res.data.level=='success'){
						
						this.$message({
							type: 'success',
							message: res.data.message
						});
						this.getUserVipApplyList()
					}else{
                        
                        console.log('assdf')
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
                    this.getUserVipApplyList()
			});
		
        },

	search(){
		//筛选
		this.getUserVipApplyList()
	},
	pageChange(e){
      //翻页
      this.page=e;
      this.getUserVipApplyList()
	},
	initData(){
		this.memberDetail=''
	},
	async showDetail(id){
		//查看详情
		const res=await this.$api.getUserVipApplyDetail({
			id
		})
		if(res.data.level=='success'){
			this.dialogVisible=true;
			this.memberDetail=res.data.data
		}else{
			this.$message({
				type:'error',
				message:res.data.message
			})
		}
	},
	
	closeDialog(){
		//关闭弹窗重置数据
		this.addFormVisible=false;
		this.payModeOptions=[
		{label:'免费',value:0},
		{label:'一次性',value:1},
		{label:'分期',value:2}
	];
		this.id='';//数据id
		this.uid=''//用户id
	}
  },
  mounted() {
	  this.getUserVipApplyList();
	  this.getUserVipRule();
  },
}
</script>
<style lang='scss' scoped>
  .apply{
    .task-form-text{
				color: #666666;
			}
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.address-detail{
			margin-top:20px;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
  }
</style>

<style>
	
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

 .apply .el-dialog__body{overflow: auto;}
</style>
